<template>
  <div class="container">
    video
    <video ref="vid" src="" controls width="100%"></video>
  </div>
</template>

<script>
import HLS from 'hls.js';
export default {
  name: 'Page',
  components: {},
  props: {
    type: {
      type: String,
      default: '',
    },
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {
    initVide() {
      var video = this.$refs.vid;
      if (HLS.isSupported()) {
        var hls = new HLS();
        hls.loadSource(
          'https://yunqivedio.alicdn.com/2017yq/v2/0x0/96d79d3f5400514a6883869399708e11/96d79d3f5400514a6883869399708e11.m3u8'
        );
        hls.attachMedia(video);
        hls.on(HLS.Events.MANIFEST_PARSED, function () {
          video.play();
        });
      } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        video.src = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8';
        video.addEventListener('loadedmetadata', function () {
          video.play();
        });
      }
    },
    initVideTool(url) {
      var video = this.$refs.vid;
      if (HLS.isSupported()) {
        var hls = new HLS();
        hls.loadSource(url);
        hls.attachMedia(video);
        hls.on(HLS.Events.MANIFEST_PARSED, function () {
          video.play();
        });
      } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        video.src = url;
        video.addEventListener('loadedmetadata', function () {
          video.play();
        });
      }
    },
  },
  created() {},
  beforeMount() {},
  mounted() {
    this.initVide();
  },
  activated() {},
  deactivated() {},
  beforeDestroy() {},
};
</script>
<style lang="scss" scoped>
.container {
}
</style>
